<template>
  <div class="picture-list">
    <!-- 图片列表 -->
    <a-list
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }"
      :data-source="dataList"
      :loading="loading"
    >
      <template #renderItem="{ item: picture }">
        <a-list-item style="padding: 0">
          <a-card hoverable @click="doClickPicture(picture)">
            <template #cover>
              <img
                :alt="picture.name"
                :src="picture.thumbnailUrl ?? picture.url"
                style="height: 180px"
                object-fit="cover"
              />
            </template>
            <a-card-meta :title="picture.name">
              <template #description>
                <a-flex>
                  <a-tag color="green">
                    {{ picture.category ?? '默认' }}
                  </a-tag>
                  <a-tag
                    v-for="tag in picture.tags"
                    :key="tag"
                    :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
                    >{{ tag }}</a-tag
                  >
                </a-flex>
              </template>
            </a-card-meta>
            <template v-if="showOp" #actions>
              <ShareAltOutlined @click="(e) => doShare(picture, e)" />
              <SearchOutlined @click="(e) => doSearch(picture, e)" />
              <EditOutlined v-if="canEdit" @click="(e) => doEdit(picture, e)" />
              <DeleteOutlined v-if="canDelete" @click="(e) => doDelete(picture, e)" />
            </template>
          </a-card>
        </a-list-item>
      </template>
    </a-list>
    <ShareModal ref="shareModalRef" :link="shareLink" />
  </div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { deletePictureUsingPost } from '@/api/pictureController'
import { message } from 'ant-design-vue'
import ShareModal from '@/components/ShareModal.vue'
import {
  DeleteOutlined,
  EditOutlined,
  SearchOutlined,
  ShareAltOutlined,
} from '@ant-design/icons-vue'
import { linkProps } from 'ant-design-vue/es/typography/Link'
import { ref } from 'vue'
interface Props {
  dataList?: API.PictureVO[]
  loading?: boolean
  showOp?: boolean
  canEdit?: boolean
  canDelete?: boolean
  onReload?: () => void
}
const props = withDefaults(defineProps<Props>(), {
  dataList: () => [],
  canEdit: false,
  canDelete: false,
  loading: false,
  showOp: false,
})
const router = useRouter()
//跳转图片详情页
const doClickPicture = (picture: API.PictureVO) => {
  router.push({
    path: `/picture/${picture.id}`,
  })
}
//  删除和编辑
//删除逻辑
function doDelete(picture, e) {
  //阻止冒泡
  e.stopPropagation()
  const id = picture.id
  if (!id) {
    return
  }
  deletePictureUsingPost({ id })
    .then((res) => {
      if (res.data.code == 200) {
        message.success('删除成功')
        props.onReload?.()
      } else {
        message.success('删除成功')
      }
    })
    .catch((err) => {
      message.error('删除失败:' + err.data.message)
    })
}
//编辑事件
function doEdit(picture, e) {
  //阻止冒泡
  e.stopPropagation()
  router.push({
    path: '/add_picture',
    query: { id: picture.id, spaceId: picture.spaceId },
  })
}

const shareModalRef = ref()
//分享链接
const shareLink = ref('')
//分享逻辑
function doShare(picture, e) {
  //阻止冒泡
  e.stopPropagation()
  shareLink.value = `${window.location.origin}/picture/${picture.id}`
  if (shareModalRef.value) {
    shareModalRef.value.openModel()
  }
}
//以图搜图事件
function doSearch(picture, e) {
  //阻止冒泡
  e.stopPropagation()
  //打开一个新页面
  window.open(`/search_picture?pictureId=${picture.id}`)
}
</script>
<style scoped>
</style>

